<template>
    <div>

        <div class="top-view">
            <div>
                <el-button lass="main-btn" size="small" type="primary" @click="onAdd" v-if="userInfo.ID == datas.headId">写跟进</el-button>
            </div>

            <el-form
                    :inline="true"
                    :model="formData"
                    label-position="right"
                    label-width="80px"
                    size="small"
                    class="filter-form-inline"
            >
                <el-form-item label="跟进职员" style="width: 200px;margin-bottom: 0" v-if="mode == 'client'">
                    <el-select
                            v-model="formData.headId"
                            clearable
                            style="width: 100%"
                            placeholder="请选择职员"
                            @change="listSearch"
                    >
                        <el-option
                                v-for="item in headOptions"
                                :key="item.id"
                                :label="item.realName"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="跟进形式" style="width: 200px;margin-bottom: 0">
                    <el-select
                            v-model="formData.visitForm"
                            clearable
                            style="width: 100%"
                            placeholder="请选择形式"
                            @change="listSearch"
                    >
                        <el-option
                                v-for="item in typeOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
        </div>

        <el-table
                header-cell-class-name="table-header"
                border
                :data="tableData"
        >
            <el-table-column header-align="center" align="center" label="跟进时间" width="150">
                <template #default="scope">
                    {{ dateFormat('yyyy-mm-dd HH:MM',scope.row.createdAt) }}
                </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="跟进职员" prop="headName" width="150" />
            <el-table-column header-align="center" align="center" label="跟进形式" prop="delivery.logistics" width="150">
                <template #default="scope">
                    {{getLabel('visit_form',scope.row.visitForm)}}
                </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="跟进内容" prop="content">
                <template #default="scope">
                    <my-tooltip
                            :content="scope.row.content"
                            :is-link="false"
                    />
                </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="客户联系人" prop="contactName" width="150" v-if="mode == 'client'"/>
            <el-table-column header-align="center" align="center" label="操作" width="100">
                <template #default="scope">
                    <el-button class="delete-text-btn" type="text" v-if="userInfo.ID == datas.headId" @click.stop="onDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
    </div>

    <addFollowDialog ref="addFollow" :datas="datas" :mode="mode" @success="getData"/>

</template>

<script>
    import {crmStore} from "../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, onMounted, ref, getCurrentInstance, inject, watch } from 'vue'
    export default defineComponent({
        name: "followRecord",
        props:{
            datas:{
                type:Object,
                default:{}
            },
            mode:{
                type:String,
                default:'clue'
            }
        },
        components:{
            addFollowDialog:defineAsyncComponent(
                ()=>import('./addFollowDialog.vue')
            )
        },
        setup(props,{emit}){
            watch(
                () => props.datas,
                (newval, oldval) => {
                    if (newval && newval.id){
                        getData()
                    }
                }
            )
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const userInfo = crmStore.getters['user/userInfo']
            const typeOption = crmStore.getters['dictionary/getDictionary']['visit_form']
            const headOptions = crmStore.getters['company/getHeadOptions']

            var data = reactive({
                tableData:[],
                formData:{
                    visitForm:'',
                    headId:'',
                },
                addFollow:null,
            })

            const listSearch = () => {
                getData()
            }

            const getData = () => {
                if (props.mode == 'clue'){
                    let a = {
                        clueId:props.datas.id,
                        visitForm:data.formData.visitForm
                    }
                    api.task.TASK_CLUE_FOLLOW_UPS(a).then(res=>{
                        if (!res.code){
                            data.tableData = res.data
                        }else{
                            currentInstance.proxy.customMessage({type:'error',message: res.msg})
                        }
                    })
                }else if (props.mode == 'client'){
                    let a = {
                        registerCustomerId:props.datas.id,
                        visitForm:data.formData.visitForm,
                        headId:Number(data.formData.headId)
                    }
                    api.task.TASK_CUSTOMER_FOLLOW_UPS(a).then(res=>{
                        if (!res.code){
                            data.tableData = res.data
                        }else{
                            currentInstance.proxy.customMessage({type:'error',message: res.msg})
                        }
                    })
                }
            }

            const onDelete = (row) => {
                currentInstance.proxy
                    .alertBox({
                        message: '你确定删除此跟进记录？删除后不可恢复',
                        title: '删除',
                    })
                    .then(() => {
                        api.task.TASK_FOLLOWUP_DELETE(row.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'删除成功'})

                                getData()
                            }else {
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onAdd = () => {
                data.addFollow.open()
            }

            onMounted(()=>{
                // getData()
            })

            return{
                ...toRefs(data),
                typeOption,
                headOptions,
                userInfo,

                listSearch,
                onAdd,
                onDelete,
                getData,
            }
        }
    })
</script>

<style lang="scss" scoped>
    .top-view{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
</style>
